<template>
  <div>
    <el-container class="main" style="height: 100vh">

      <!-- 左侧导航aside-->
      <el-aside :width="tabWidth+'px'">
        <el-menu
          router
          background-color="#001529"
          text-color="#fff"
          active-text-color="#cc0000"
          :default-active="this.$route.path"
          @select="handleSelect_left"
          :unique-opened="uniqueOpened"
          class="el-menu-vertical-demo"
          style="overflow-y: auto;height: 100vh"
        >

          <!-- 无子列表-->
          <el-menu-item>
            <div class="main-logo">
              <img src="../assets/img/logo.png" height="158" width="500"/>
            </div>
          </el-menu-item>

          <!-- 无子列表-->
          <el-menu-item :index="item.path+''" v-for="(item, index1) in nodeList" :key="index1+'0'">
            <i :class="item.icon"></i>
            <span>{{item.label}}</span>
          </el-menu-item>

          <!--有子列表-->
          <el-submenu :index="item.nodeId + ''" v-for="(item, index) in subNodeList" :key="index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.label}}</span>
            </template>
            <el-menu-item-group v-if="item.children">
              <el-menu-item :index="node.path + ''" v-for="(node, index) in item.children" :key="index">
                <template slot="title">
                  <span>{{node.label}}</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>

        <!--顶部header-->
        <el-header class="header">
          <div class="left">
            <p>干部培训后台管理</p>
          </div>
          <div class="right">
            <el-tooltip placement="bottom-end" effect="light">
              <div class="first">
                <img :src="message"/>
                <el-badge :value="200" :max="99" class="item">
                  <span>消息</span>
                </el-badge>
              </div>
              <div slot="content">
                <div style="cursor: pointer">
                  <div class="message-info">
                    <div class="top">
                      <span>站内消息通知</span>
                    </div>
                    <div class="info-item" v-for="(item,index) in 3" :key="index">
                      <p>用户<span style="color: #cc0000">罗国归</span>邀请你提供方案，点击查看>></p>
                      <p class="time">2020年5月30日 11：22</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-tooltip>

            <div class="second">
              <img :src="back"/>
              <span>返回前台</span>
            </div>
            <el-tooltip placement="bottom-end" effect="light">
              <div class="third" id="info">
                <img src="../assets/img/head.png" height="32" width="32" style="vertical-align: middle"/>
                <span style="vertical-align: middle">罗国归</span>
                <i class="el-icon-arrow-down"> </i>
              </div>
              <div slot="content">

                <div class="person-mess" style="border-bottom: 1px solid #f2f2f2" @click="goPersonInfo">
                  <p>个人资料</p>
                </div>

                <div class="person-mess" @click="loginOut">
                  <p>安全退出</p>
                </div>
              </div>
            </el-tooltip>
          </div>
        </el-header>

        <el-main style="padding: 0">
          <div v-if="isShowBread">
            <bread-crumb :current_path="current_path" :isEdit="isEdit" :isAdd="isAdd"></bread-crumb>
          </div>
          <div style="padding: 20px">
            <nuxt/>
          </div>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex';

  import message from 'assets/icons/message.svg'
  import back from 'assets/icons/back.svg'

  import BreadCrumb from "../components/breadCrumb.vue";

  export default {
    name: 'frame',

    components: {
      BreadCrumb,
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),
      ...mapState({
        current_path: state => state.filter.current_path
      }),
      ...mapGetters('filter', ['isEdit', 'isAdd']),
    },

    data() {
      return {
        message: message,
        back: back,

        tabWidth: 208,
        uniqueOpened: true,
        direction: 'rtl',

        nodeList: [
          {
            nodeId: 1,
            label: '首页',
            icon: 'el-icon-s-home',
            path: '/workPlatform'
          },
          {
            nodeId: 2,
            label: '基础信息',
            icon: 'el-icon-document',
            path: '/workPlatform/baseInfo'
          },
          {
            nodeId: 3,
            icon: 'el-icon-s-order',
            label: '消息列表',
            path: '/workPlatform/messageList'
          },
          {
            nodeId: 4,
            icon: 'el-icon-s-custom',
            label: '成员管理',
            path: '/workPlatform/staffManagement'
          },
          {
            nodeId: 5,
            icon: 'el-icon-shopping-cart-full',
            label: '订单管理',
            path: '/workPlatform/orderManagement'
          },
          {
            nodeId: 6,
            icon: 'el-icon-s-grid',
            label: '系统配置',
            path: '/workPlatform/system'
          },
          {
            nodeId: 7,
            icon: 'el-icon-files',
            label: '个人资料',
            path: '/workPlatform/personInfo'
          }
        ],
        subNodeList: [
          {
            nodeId: 7,
            icon: 'el-icon-document-copy',
            label: '内容管理',
            children: [
              {
                label: '基本内容管理',
                path: '/workPlatform/contentManagement/baseMessage',
                icon: 'el-icon-shopping-cart-full'
              },
              {
                label: '项目管理',
                path: '/workPlatform/contentManagement/project',
                icon: 'el-icon-shopping-cart-full'
              },
              {
                label: '专家管理',
                path: '/workPlatform/contentManagement/expert',
                icon: 'el-icon-shopping-cart-full'
              },
              {
                label: '新闻管理',
                path: '/workPlatform/contentManagement/news',
                icon: 'el-icon-shopping-cart-full'
              },
              {
                label: '校园风光',
                path: '/workPlatform/contentManagement/campus',
                icon: 'el-icon-shopping-cart-full'
              },
              {
                label: '培训心得',
                path: '/workPlatform/contentManagement/training',
                icon: 'el-icon-shopping-cart-full'
              },
            ]
          },
          {
            nodeId: 8,
            icon: 'el-icon-user',
            label: '客户管理',
            children: [
              {
                label: '客户管理',
                path: '/workPlatform/customerManagement/customer',
                icon: 'el-icon-shopping-cart-full'
              },
              {
                label: '客户共享',
                path: '/workPlatform/customerManagement/customerShare',
                icon: 'el-icon-shopping-cart-full'
              }
            ]
          }
        ],
        userInfo: {
          uid: 0,
          name: ''
        }
      };
    },
    methods: {
      handleSelect_left(key, keyPath) {
        console.log(key, keyPath)
      },
      //个人资料
      goPersonInfo() {
        this.$router.push({
          path: '/workPlatform/personInfo'
        })
      },
      loginOut() {

      }
    }
  }
</script>
<style lang="scss">
  $header-height: 64px;
  * {
    text-decoration-line: none;
  }

  .main {
    .header {
      z-index: 100;
      height: $header-height;
      background-color: #FFFFFF;
      box-shadow: rgba(0, 0, 0, 0.098) 0 1px 2px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left {
        p {
          font-size: 16px;
          font-weight: 500;
          color: #666666;
        }
      }

      .common-layout {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .right {
        @extend .common-layout;

        .first, .second, .third {
          @extend .common-layout;

          img {
            width: 24px;
            height: 24px;
            margin-right: 2px;
          }

          span {
            font-size: 12px;
            color: #666666;
          }
        }

        .first:hover, .second:hover, .third:hover {
          cursor: pointer;
        }

        .second {
          margin-left: 36px;
          margin-right: 18px;
        }

        .third:hover {
          cursor: pointer;
        }
      }
    }
  }

  /*信息*/

  .message-info {
    width: 288px;

    .common-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .top {
      @extend .common-info;
      background-color: rgba(242, 242, 242, 1);
      height: 49px;
      width: 100%;

      span {
        font-size: 13px;
        color: #333333;
      }

    }

    .info-item {
      padding: 16px;
      border-bottom: 1px solid #f2f2f2;

      p {
        font-size: 13px;
        color: #333333;
      }

      .time {
        font-size: 12px;
        color: #999999;
      }
    }
  }

  /*安全退出登录*/

  .person-mess {
    cursor: pointer;
    padding: 10px;

    p {
      font-size: 12px;
    }
  }

  .person-mess:hover {
    p {
      color: #cc0000;
    }
  }

  /*头像*/
  .main-logo {
    width: 208px;
    height: 64px;

    img {
      width: 126px;
      height: 40px;
    }
  }

</style>
